<template>
    <div class="click_main_container" v-show="isShowClickPopup">
      <div class="tabs_container">
        <div
          class="tab_item_btn"
          :class="{ active: btn.active }"
          v-for="(btn, index) in tabsItemList"
          :key="index"
          @click="tabItemClick(btn, index)"
        >
          <img  :src="btn.active ? btn.image_active : btn.image" alt="" :class="btn.active ? 'tab_item_btn_active' : 'tab_item_btn_unactive'"/>
          <p>{{ btn.name }}</p>
        </div>
      </div>
      <div class="click_main_content">
        <div class="click_main_title">
          <span>{{ titleText }}</span>
        </div>
        <div class="click-close" @click="handleClose"></div>
        <div class="click-content">
          <!-- {{ paramsData }} -->
          <!-- <keep-alive>
            <component :is="componentName" :paramsData="paramsData"></component>
          </keep-alive> -->
          <ChartCon v-show="componentName == 'ChartCon'" :paramsData="paramsData"/>
          <DetailModal v-show="componentName == 'DetailModal'" :paramsData="paramsData"/>
        </div>
      </div>
    </div>
  </template>
  
  <script>
  
  import DetailModal from './DetailModal.vue';
  import ChartCon from './ChartCon.vue';
  
  
  export default {
    name:'ClickPopup',
    components:{
      DetailModal,
      ChartCon
    },
    props: {
      paramsData: {
        type: Object,
        default: function () {
          return {}
        }
      },
    },
   
    data() {
      return {
        titleText: 'click输水西干一级供水北干管',
        isShowClickPopup: true,
        tabsItemList: [
          {
            name: "监测数据",
            image: require("@/assets/rightMenu/selectInfo/button_info.png"),
            image_active: require("@/assets/rightMenu/selectInfo/button_info_active.png"),
            active: true,
            component: 'ChartCon'
          },
          {
            name: "测站详情",
            image: require("@/assets/rightMenu/selectInfo/button_info.png"),
            image_active: require("@/assets/rightMenu/selectInfo/button_info_active.png"),
            active: false,
            component: 'DetailModal'
          },
        ],
        isShowHoverPopup: false,
        componentName: 'ChartCon'
      };
    },
  
    methods: {
      tabItemClick(btn, index) {
        this.tabsItemList.map((item) => {
          item.active = false;
        });
        btn.active = true;
        this.componentName = btn.component;
      },

      handleClose() {
        this.isShowClickPopup = false;
      }
    },
  };
  </script>
  
  <style lang="scss" scoped>
  .click_main_container {

  }


  
  .tabs_container {
    display: flex;
  }
  .tab_item_btn {
    width: 110px;
    height: 30px;
    position: relative;
    left: 1px;
    color: rgba(255, 255, 255, 0.5);
    top: 3px;
    cursor: pointer;
  }
  

  .tab_item_btn.active{
    color: #fff;
    z-index: 999;
  }
  
  .tab_item_btn_active {
    width: 126%;
    height: 100%;
    z-index: 999;
  }
  .tab_item_btn_unactive {
    width: 126%;
    height: 100%;
    z-index: 998;
  }

  .tab_item_btn p {
    font-family: SourceHanSansCN-Regular;
    font-size: 12px;
    position: absolute;
    top: 50%;
    left: 8%;
    transform: translate(10%, -50%);
  }
  
  
  .click_main_content{
    width: 540px;
    height: 243px;
    background: url('@/assets/poipopup/poi-popup-bg-583-243.png');
    background-size: 100% 100%;
  }

  
  .click_main_title {
      height: 42px;
      font-family: SourceHanSansCN-Regular;
      font-size: 14px;
      background-size: 100% 100%;
      text-align: left;
      padding-left: 20px;
      background-color: rgba(123,232,158,0.8);
    }

    .click_main_title span {
      font-family: SourceHanSansCN-Regular;
      font-size: 14px;
      font-weight: normal;
      font-stretch: normal;
      line-height: 42px;
      letter-spacing: 0px;
      color: #ffffff;
      background-image: linear-gradient(to bottom, #fff 30%, #00baff); /*  背景线性渐变 */
      background-clip: text;
      -webkit-background-clip: text;  /* 背景被裁减为文字的前景色 */
      -webkit-text-fill-color: transparent;  /* 文字填充为透明，优先级比color高。  */
    }

    .click-close {
      width: 14px;
      height: 15px;
      background: url('@/assets/poipopup/poi_popup_close.png');
      position: relative;
      top: -24px;
      left: 658px;
      cursor: pointer;
    }

    .click-content {
      padding: 20px 20px 20px 20px;
      // background-color: red;

    }

  
  
  </style>